<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./font_4878225_mo983kvaqyc/iconfont.css">
    <title>小兔鲜儿</title>
</head>
<body>
        <!-- 快捷导航 -->
        <div class="shortcut"> 
            <div class="wrapper">
                <ul>
                    <li><a href="#">请先登录</a></li>
                    <li><a href="#">免费注册</a></li>
                    <li><a href="#">我的订单</a></li>
                    <li><a href="#">会员中心</a></li>
                    <li><a href="#">帮助中心</a></li>
                    <li><a href="#">在线客服</a></li>
                    <li><a href="#"><span></span>请先登录</a></li>
                </ul>
            </div>
        </div>
     
        <!-- 头部 -->
        <div class="header wrapper">
            <div class="logo">
                <h1><a href="#">小兔鲜儿</a></h1>
                <!-- <img src="./images/logoxiaotu.png" alt=""> -->
            </div>
            <div class="nav">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">生鲜</a></li>
                    <li class="active"><a href="#">美食</a></li>
                    <li><a href="#">餐厨</a></li>
                    <li><a href="#">电器</a></li>
                    <li><a href="#">居家</a></li>
                    <li><a href="#">洗护</a></li>
                    <li><a href="#">孕婴</a></li>
                    <li><a href="#">服装</a></li>
                </ul>
            </div>
            <div class="search">
                <input type="text" placeholder="搜一搜">
                <!-- 定位实现放大镜 -->
                <span class="iconfont icon-sousuotubiao"></span>

            </div>
            <div class="car">
                <span class="iconfont icon-gouwuchekong"></span>
            </div>
        </div>
        <!-- banner图区域 -->
    <div class="banner">
        <div class="wrapper">
            <!-- 有多少个图，就有多少个li -->
            <ul>
                <li><a href="#"><img src="./images/banner_1.png" alt=""></a></li>
            </ul>
 
            <!-- 侧导航 -->
            <div class="aside">
                <ul>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li class="active"><a href="#">美食<span>面点 干果</span></a></li>
                    <li><a href="#">餐厨<span>数码产品</span></a></li>
                    <li><a href="#">电器<span>床品 四件套 被枕</span></a></li>
                    <li><a href="#">居家<span>奶粉 玩具 辅食</span></a></li>
                    <li><a href="#">洗护<span>洗发水 美妆</span></a></li>
                    <li><a href="#">孕婴<span>奶粉 玩具</span></a></li>
                    <li><a href="#">服饰<span>男装 女装</span></a></li>
                    <li><a href="#">杂货<span>户外 图书</span></a></li>
                    <li><a href="#">品牌<span>品牌制造</span></a></li>
                </ul>
            </div>
 
            <!-- 箭头 -->
            <!-- prev：上一个 -->
            <a href="#" class="prev"></a>
            <!-- next：下一个 -->
            <a href="#" class="next"></a>
 
            <!-- 底部原点 -->
            <!-- 描述选中状态： current/active-->
            <ol>
                <li></li>
                <li></li>
                <li class="current"></li>
                <li></li>
                <li></li>
            </ol>
        </div>
    </div>
     <!-- 新鲜好物 -->
     <div class="goods wrapper">
        <!-- hd header 头部-->
        <div class="hd">
            <h2>新鲜好物 <small>新鲜出炉 品质靠谱</small></h2>
            <a href="#">查看全部</a>
        </div>
        <!-- bd body 身体、内容 -->
        <div class="bd clearfix">
            <ul>
                <li>
                    <a href="#">
                        <img src="./images/new_goods_1.jpg" alt="">
                        <h3>睿米无线吸尘器F8</h3>
                        <div>￥<span>899</span></div>
                        <b>新品</b>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/new_goods_2.jpg" alt="">
                        <h3>智能环绕3D空调</h3>
                        <div>￥<span>1299</span></div>
                        <b>新品</b>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/new_goods_3.jpg" alt="">
                        <h3>广东糯米煲仔饭</h3>
                        <div>￥<span>129</span></div>
                        <b>新品</b>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/new_goods_4.jpg" alt="">
                        <h3>罗西机械智能手表</h3>
                        <div>￥<span>3399</span></div>
                        <b>新品</b>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 生鲜 -->
    <div class="shengxian wrapper">
        <div class="hd">
            <h2>生鲜</h2>
            <a href="#" class="more">查看全部</a>
            <ul>
                <li class="sheng"><a href="#">水果</a></li>
                <li><a href="#">蔬菜</a></li>
                <li><a href="#">肉禽蛋</a></li>
                <li><a href="#">裤装</a></li>
                <li><a href="#">衬衫</a></li>
                <li><a href="#">T恤</a></li>
                <li><a href="#">内衣</a></li>
            </ul>
        </div>
        <div class="bd clearfix">
            <div class="left">
                <a href="#"><img src="./images/fresh_goods_cover.jpg" alt=""></a>
            </div>
            <div class="right">
                <ul>
                    <li>
                        <a href="#">
                            <img src="./images/fresh_goods_1.jpg" alt="">
                            <h3>美威 智利原味三文鱼排<br>
                                240g/袋 4片装<br>
                                海鲜年货</h3>
                            <div>￥<span>59</span></div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/fresh_goods_2.jpg" alt="">
                            <h3>红功夫 麻辣小龙虾1.5kg<br>
                                4-6钱/25-32只<br>
                                火锅食材</h3>
                            <div>￥<span>79</span></div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/fresh_goods_3.jpg" alt="">
                            <h3>三都港 冷冻无公害黄花鱼<br>
                                700g 2条 袋装<br>
                                海鲜水产</h3>
                            <div>￥<span>49</span></div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/fresh_goods_4.jpg" alt="">
                            <h3>渔公码头 大连鲜食入味<br>
                                即食海参 辽参刺参<br>
                                调味海</h3>
                            <div>￥<span>899</span></div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/fresh_goods_5.jpg" alt="">
                            <h3>越南白心火龙果4个装<br>
                                标准果400-550g<br>
                                新鲜水果</h3>
                            <div>￥<span>20</span></div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/fresh_goods_6.jpg" alt="">
                            <h3>广西沃柑 新鲜水果<br>
                                柑橘1.5kg<br>
                                新鲜水果</h3>
                            <div>￥<span>10</span></div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/fresh_goods_7.jpg" alt="">
                            <h3>进口 牛油果 6个装<br>
                                单果重约130-180g<br>
                                新鲜水果</h3>
                            <div>￥<span>50</span></div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/fresh_goods_8.jpg" alt="">
                            <h3>泰国进口山竹5A级 500g<br>
                                新鲜水果</h3>
                            <div>￥<span>60</span></div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
        <!-- 尾部（版权区域）-->
        <div class="footer">
            <div class="wrapper">
                <!-- 联系我们 -->
                <div class="contact clearfix">
                  
                    <dl>
                        <dt>客户服务</dt>
                        <dd class="chat">
                         
                            "在线客服"
                        </dd>
                        <dd class="feedback">
                          
                            "问题反馈"
                        </dd>
                    </dl>
                    <dl>
                        <dt>关注我们</dt>
                        <dd class="weixin">
                           
                            "公众号"
                        </dd>
                        <dd class="weibo">
                        
                            "微博"
                        </dd>
                    </dl>
                <dl>
                    <dt>下载APP</dt>
                    <dd class="qrcode">
                        <img src="./images/qrcode.jpg">
                    </dd>
                    <dd class="download">
                        <span>扫描二维码</span>
                        <span>立马下载APP</span>
                        <a href="javascript:;">下载页面</a>
                    </dd>
                </dl>
                <dl>
                    <dt>服务热线</dt>
                    <dd class="hotline">
                        "400-0000-000"
                        <small>周一至周日 8:00-18:00</small>
                    </dd>
                </dl>

                </div>
            </div>
            <!-- 其它 -->
             <div class="extra">
                <div class="wrapper">
                    <!-- 口号 -->
                     <div class="slogan">
                        <a href="javascript:;" class="price">
                            价格亲民
                            <img src="./images/jiageqinming.png">
                        </a>
                        <a href="javascript:;" class="express">
                            
                            物流快捷
                            <img src="./images/wuliukauijie.png" >
                        </a>
                        <a href="javascript:;" class="quality">
                       
                            品质新鲜
                            <img src="./images/pingzhixinxian.png" >
                        </a>
                  
                     </div>
                     <!-- 版权信息 -->
                     <div class="CopyRight">
                        <p>
                            <a href="javascript:;">关于我们</a> |
                            <a href="javascript:;">帮助中心</a> |
                            <a href="javascript:;">售后服务</a> |
                            <a href="javascript:;">配送与验收</a> |
                            <a href="javascript:;">商务合作</a> |
                            <a href="javascript:;">搜索推荐</a> |
                            <a href="javascript:;">友情链接</a> |
                        </p>
                        <p>
                            CopyRight@小兔鲜儿
                        </p>
                    </div>
                </div>
             </div>
            </div>
        </div>
</body>
</html>

<style>
    /* 各个页面相同的样式表 */
/* 版心 */
/* common.css部分 */
.wrapper{
    width: 1240px;
    margin: 0 auto;
}
 
.shortcut{
    height: 52px;
    background-color: #333;
}
 
.shortcut .wrapper{
    height: 52px;      
}
 
.shortcut .wrapper ul{
    float:right;
    list-style: none;
}
 
.shortcut .wrapper li{
    float: left;
    line-height: 52px;
}
 
.shortcut .wrapper a{
    padding: 0 16px;
    border-right: 1px solid #666;
    font-size: 14px;
    color: #dcdcdc;
    text-decoration: none;
}
 
.shortcut .wrapper li:nth-child(7) a{
    border-right: 0;
    text-decoration: none;
}
 
.shortcut .wrapper a span{
    display: inline-block;
    width: 11px;
    height: 16px;
    background-image: url(../images/sprites.png);
    background-position: -160px -70px;
    vertical-align: middle;
    margin-right: 8px;
}
 

/* 头部 */
.header{
    margin: 30px auto;
    height: 70px;
}
 
.logo{
    float: left;
    width: 205px;
    height: 70px;
}
 
/* logo搜索引擎优化做法 */
.logo h1{
    width: 205px;
    height: 70px;
}
 
.logo h1 a{
    display: block;
    width: 205px;
    height: 70px;
    background-image: url(./images/logoxiaotu.png);
    background-size: contain;
    /* 字号归零，让h1里的字看不到 */
    font-size: 0;
}
 
.nav li{
    float: left;
    margin-right: 48px;
    line-height: 70px;
}
 
.nav li a{
    padding-bottom: 7px;
    color:#333;
    text-decoration: none;
}

 
.nav li a:hover{
    color: #27ba9b;
    border-bottom:1px solid #27ba9b
}

.nav{
    float: left;
    margin-left: 40px;
    height: 70px;
    padding-top: 13px;
}

 
.search{
    position: relative;
    float: left;
    right: 28px;
    top: 10px;
    margin-top: 24px;
    margin-left: 34px;
    width: 172px;
    height: 30px;
    border-bottom: 2px solid #e7e7e7;
}
 
.search input{
    padding-left: 30px;
    width: 172px;
    height: 28px;
}
 
.search input::placeholder{
    font-size: 14px;
    color: #ccc;
}
 
.search span{
    position: absolute;
    left: 6px;
    top: 8px;
    /* display: inline-block; */
    width: 18px;
    height: 18px;
    background-position: -79px -69px;
}
 
.car{
    position:relative;
    float: left;
    margin-top: 28px;
    margin-left: 15px;
    width: 23px;
    height: 23px;
    background-position: -119px -69px ;
}
 
.car span{
    /* 绝对定位，盒子具备行内块特点 */
    position: absolute;
    right: 2px;
    top: 11px;
    width: 20px;
    height: 20px;
    /* background-color: #e26237; */
    border-radius: 10px;
    font-size: 30px;
    color: #131212;
    text-align: center;
    line-height: 17px;
}
 



/* banner */
.banner {
    height: 500px;
    background-color: #f5f5f5;
}
 
.banner .wrapper {
    position: relative;
    height: 500px;
    background-color: pink;
}

.banner .wrapper img {
    position: relative;
    top: -1px;
    left: 2px;   
}
 
/* 侧导航 */
.banner .aside{
    position: absolute;
    left:0;
    top: 0;
    width: 250px;
    height: 500px;
    background-color: rgba(0,0,0,.8);
}
 
.banner .aside li{
    height: 50px;
    line-height: 22px;
    list-style: none;
}

.banner .aside li.active{
    background-color: #5eb69c;
}
 
.banner .aside a{
    position: relative;
    padding-left: 52px;
    padding-right: 19px;
    /* 宽度和父级一样 */
    display: block;
    height: 50px;
    font-size: 19px;
    color: #fff;
    padding-top: 12px;
    text-decoration: none;
}
 
.banner .aside span{
    margin-left: 15px;
    font-size: 14px;
}
 
.banner .aside a:hover{
    background-color: #27ba9b;
}
 
 
/* a的里边最后的位置添加箭头 */
.banner .aside a::after{
    position: absolute;
    right: 19px;
    top: 19px;
    content: '';
    width: 6px;
    height: 11px;
    background-image: url(../images/sprites.png);
    background-position:-80px -110px;
}
 
/* 箭头部分 */
.prev,
.next{
    position: absolute;
    top:228px;
    width: 45px;
    height: 45px;
    background-color: rgba(0,0,0,.2);
    background-image: url(../images/sprites.png);
    border-radius: 50%;
}
 
.prev{
    left:260px;
    background-position: 15px -60px;
}
 
.next{
    right: 10px;
    background-position: -23px -60px;
}
 
/* 底部原点 */
.banner ol{
    position: absolute;
    left: 680px;
    bottom: 30px;
    width: 200px;   
    height: 10px;
}
 
.banner ol li{
    float: left;
    margin-right: 15px;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    background-color:rgba(255,255,255,0.4);
    cursor: pointer;
}
 
.banner ol .current{
    background-color: #fff;
}


/* 新鲜好物 */
.goods .hd{
    height: 114px;
    line-height: 114px;
}
 
.goods .hd h2{
    float: left;
    height: 114px;
    font-size: 29px;
    font-weight: 400;
}

 
.goods .hd h2 span{     
    margin-left: 34px;
    font-size: 16px;
    color:#999;
}
.goods .hd a{
    color:#999;
    line-height: 1;
    margin-top: 14px;
    font-size: 16px;
    float: right;
    position: absolute;
    right: 210px;
}
 
.goods .hd a::after{
    content: '';
    display: inline-block;
    margin-left: 15px;
    width: 7px;
    height: 13px;
    background-image: url(../images/sprites.png);
    background-position: 0 -110px;
    vertical-align: middle;
}
 
.goods .bd li{
    position: relative;
    float: left;
    margin-right: 8px;
    width: 304px;
    height: 405px;
    background-color: #f0f9f4;
    text-align: center;
}     
 
.goods .bd li a{
    text-decoration: none;
    color: #131212;
}
.goods .bd li:nth-child(4n){
    margin-right: 0;
}
 
.goods .bd li img{
    width: 304px;
}
 
.goods .bd li h3{
    margin: 20px 0 10px 0;
    font-size: 20px;
    font-weight: 400;
    color: #131212;
}
 
.goods .bd li div{
    color:#9a2e1f;
    font-size: 18px
}
 
.goods .bd li span{
    font-size: 24px;
}
 
.goods .bd li b{
    position: absolute;
    left: 17px;
    top: 18px;
    width: 28px;
    height: 51px;
    border: 1px solid #27ba9b;
    border-radius: 2px;
    font-size: 18px;
    color:#27ba9b;
    font-weight: 400;
    line-height: 24px;
}


/* 生鲜 */
/* 重置样式，消除默认内外边距 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}
.shengxian-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}               
.hd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 38px;
    padding-top: 43px;
    padding-right: 135px;
}
.hd h2 {
    float: left;
    height: 114px;
    font-size: 29px;
    font-weight: 400;
}
.hd ul {
    list-style: none;
    display: flex;
    text-decoration: none;
}
.hd li {
    margin-right: 10px;
    color: white;
    padding: 3px 6px;
    border-radius: 3px;
    text-decoration: none;
}

.hd li a{
    color:#898989;
}

.hd li.sheng{
    background-color: #5eb69c;
}

.hd a.more {
    text-decoration: none;
    position: absolute;
    right: 230px;
    /* color: #333;
    font-size: 14px; */
    float: right;
    color: #999;
}

.bd {
    display: flex;
}
.left {
    width: 20%;
}
.left img {
    width: 100%;
    height: 97%;
}
.right {
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.right ul {
    list-style: none;
    width: 100%;
    margin-bottom: 20px;
    background-color: #f9f9f9;
    padding: 10px;
    text-align: center;
}
.right img {       
    width: 100%;
    padding-top: 10px;
    margin-left: 10px;
    background-color: #fff;
    border: 1px solid #fff;
    overflow: hidden;
    transition: 0.3s;
    position: relative;
    float: left;
}
.right ul li {
    width: 25%;
    float: left;
    background-color: #f9f9f9;
    padding: 10px;
    text-align: center;
}

.right ul li a{
    text-decoration: none;
}
.right h3 {
    font-size: 16px;
    margin-bottom: 5px;
    color: #131212;
}
.right div {
    font-size: 14px;
    color: #f40;
}
/* 尾部（版权区域） */
/* 底部样式 */
.footer {
    background-color: #f8f8f8;
    color: #666;
    font-size: 14px;
    border-top: 1px solid #eee;
}

.footer .wrapper {
    width: 1200px;
    margin: 0 auto;
}

/* 联系我们区域 */
.contact {
    padding: 40px 0;
    border-bottom: 1px solid #eee;
}

.contact dl {
    float: left;
    width: 265px;
    padding-left: 40px;
}

.contact dt {
    /* font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333; */
    line-height: 1;
    font-size: 18px;
}

.contact dd {
    /* margin-bottom: 10px;
    position: relative;
    padding-left: 20px; */
    margin: 36px 12px 0 0;
    float: left;
}

.contact dd::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-size: contain;
    background-repeat: no-repeat;
}

.chat::before {
    background-image: url(./images/chat-icon.png);
}

.feedback::before {
    background-image: url(./images/feedback-icon.png);
}

.weixin::before {
    background-image: url(./images/weixin.png);
}

.weibo::before {
    background-image: url(./images/weibo-icon.png);
}

.qrcode img {
    width: 80px;
    height: 80px;
    margin-bottom: 10px;
}

.download span {
    display: block;
    line-height: 1.5;
}

.download a {
    /* color: #ff6700;
    text-decoration: none; */
    display: block;
    line-height: 1;
    padding: 10px 25px;  
    margin-top: 5px;
    color: #fff;
    border-radius: 2px;
    background-color: #5eb69c;
}

.hotline {
    /* font-size: 22px;
    color: #ff6700;
    margin-bottom: 5px !important; */
    padding-top: 20px;
    font-size: 22px;
    color: #666;
}

.hotline small {
    /* display: block;
    font-size: 14px;
    color: #666;
    margin-top: 5px; */
    display: block;
    font-size: 15px;
    color: #999;
}

/* 其它区域 */
.extra {
    padding: 20px 0;
}

.slogan {
    height: 178px;
    line-height: 58px;
    padding: 60px 100px;
    border-bottom: 1px solid #434343;
    text-align: justify;
    background-color: rgb(51, 51, 51);
}

.slogan a {
    /* margin: 0 15px;
    color: #666;          
    text-decoration: none;
    position: relative;
    padding-left: 25px; */
    display: inline-block;
    height: 58px;
    line-height: 58px;
    color: #fff;
    font-size: 28px;
    text-decoration: none;
    padding-left: 115px;
}

.slogan a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
}

/* .price img{
    position: absolute;
    left: 90px;
} */

.express::before {
    position: absolute;
    left: 180px;
}

.quality::before {
    position: absolute;
    left: 270px;
}

/* 版权信息 */
.CopyRight {
    height: 170px;
    padding-top: 40px;
    text-align: center;
    color: #999;
    font-size: 15px;
    background-color: rgb(51, 51, 51);
}

.CopyRight p {
    margin: 5px 0;
}
         
.CopyRight a {
    color: #666;
    text-decoration: none;
    margin: 0 5px;
}

.CopyRight a:hover {
    color: #ff6700;
}

/* 清除浮动 */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}
</style>